<script setup>
import { ref, onMounted } from 'vue';
import { getHonorAPI } from '@/api/Honor.js'; // Adjust the import path if necessary
import { useUserStore } from "@/stores/user";
import { ElCard, ElDialog } from 'element-plus';

const store = useUserStore();
const userId = store.UserId; // Assuming userId is passed via route
const honorData = ref({});
const selectedMedal = ref(null);
const showDialog = ref(false);

// Define images for each level
const images = ref([
  { src: new URL('@/assets/level/1.png', import.meta.url).href, alt: 'Image 1' },
  { src: new URL('@/assets/level/2.png', import.meta.url).href, alt: 'Image 2' },
  { src: new URL('@/assets/level/3.png', import.meta.url).href, alt: 'Image 3' },
  { src: new URL('@/assets/level/4.png', import.meta.url).href, alt: 'Image 4' },
  { src: new URL('@/assets/level/5.png', import.meta.url).href, alt: 'Image 5' },
  { src: new URL('@/assets/level/6.png', import.meta.url).href, alt: 'Image 6' },
  { src: new URL('@/assets/level/7.png', import.meta.url).href, alt: 'Image 7' }
]);


const fetchHonorData = async () => {
  try {
    const response = await getHonorAPI(userId);
    honorData.value = response.data.data;
  } catch (error) {
    console.error('Failed to fetch honor data:', error);
  }
};

const showMedalDescription = (medal) => {
  selectedMedal.value = medal;
  showDialog.value = true;
};

// Function to get the appropriate level icon
const getLevelIcon = (level) => {
  return images.value[level - 1]?.src; // Adjusted to match level index (1-based)
};

onMounted(() => {
  fetchHonorData();
});
</script>

<template>
  <div>
    <div class="user-info" style="margin-top: 30px;margin-left: -140px;height: 100px;">
      <span class="user-detail">用户名: {{ honorData.username }}</span>
      <span class="user-detail">昵称: {{ honorData.nickname }}</span>
      <span class="user-detail" style="color: #f44b02">
    <img style="width: 40px; height: 40px" src="@/assets/Photo/积分.png" alt="">
    : {{ honorData.point ? honorData.point.toFixed(2) : '0.00' }}
</span>
      <span class="user-detail">
        等级:
        <img v-if="honorData.level" :src="getLevelIcon(honorData.level)" alt="Level Icon" class="level-icon" />
      </span>
    </div>
    <p style="font-size: 26px;font-weight: bold;margin-left: 30%">勋章墙</p>

    <div class="medal-container">
      <ElCard
          v-for="medal in honorData.honorMedals"
          :key="medal.id"
          :body-style="{ padding: '0' }"
          class="medal-card"
          @click="showMedalDescription(medal)"
      >
        <img :src="medal.image" alt="Medal Image" class="medal-image" />
        <div class="medal-name">{{ medal.name }}</div>
      </ElCard>
    </div>

    <ElDialog v-if="selectedMedal" v-model="showDialog" title="荣誉描述" style="width: 500px">
      <div>
        <img  style="margin-left: 20%" :src="selectedMedal.image" alt="Medal Image" class="medal-image" />

      </div>
      <div>
        <h3 style="text-align: center;font-weight: bold">{{ selectedMedal.name }}</h3>
        <p> &nbsp&nbsp&nbsp&nbsp&nbsp{{ selectedMedal.description }}</p>
      </div>

    </ElDialog>
  </div>
</template>

<style scoped>
.user-info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f5f6f5; /* Light green for environmental theme */
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.3);
  font-size: 20px;
  color: #004e00;
}

.user-detail {
  font-weight: bold;
  display: flex;
  align-items: center;
}

.level-icon {
  width: 80px; /* Adjust the size as needed */
  height: 80px;
  margin-left: 5px;
}

.medal-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Ensures 4 items per row */
  gap: 20px;
  justify-items: center; /* Centers items within each grid cell */
  width: 1000px;
  margin-top: 20px;
  margin-left: -230px;
}

.medal-card {
  width: 250px;
  cursor: pointer;
}

.medal-image {
  width: 250px;
  height: auto;
  border-radius: 8px;
}

.medal-name {
  text-align: center;
  padding: 10px;
  font-weight: bold;
}
</style>
